<script setup lang='ts' name="sales-order">
import { ref } from 'vue'

import EditList from './component/edit-list.vue'
import OrderList from './component/order-list.vue'

// const tabs = ['订单列表', '已删除订单', '修改订单列表']
const tabs = ['订单列表']
const active = ref(0)

function change(val: any) {
    console.log(123, active.value)
    console.log(33, val)
}
</script>

<template>
    <el-tabs v-model="active"
             class="order-tabs"
             type="border-card"
             @tab-change="change"
    >
        <el-tab-pane v-for="(item, index) in tabs"
                     :key="index"
                     :name="index"
                     :label="item"
        />
    </el-tabs>

    <OrderList v-if="active === 0" />

    <EditList v-if="active === 2" />
</template>

<style lang="less" scoped>
.order-tabs {
    border-bottom-color: transparent;
    box-shadow: var(--el-box-shadow-light);
}
</style>
